<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<div th:fragment="js(scripts)">
    <script>
        let config = {};

        function set_menu() {
            //ajax提交信息
            $.ajax({
                type: "get",
                async: false,
                url: "/menu",// 请求发送到LoginServlet处
                dataType: 'json',
                success: function (msg) {
                    if (msg.ok === true && msg.data) {
                        config["name"] = msg.message;
                        config["menu"] = msg.data;
                    }
                    if (msg.ok === false) {
                        window.location.href = "/logout";
                    }
                    if (!msg.data) {
                        window.location.href = "/logout";
                    }
                },
                error: function (msg) {
                    // 请求失败时执行该函数
                    layer.alert('请求菜单数据失败！！！', function (index) {
                        //do something
                        layer.close(index);
                    });
                }
            });
        }

        set_menu();


        $(document).ready(function () {
            //删除
            $(".del").click(function () {
                var url = $(this).attr("href");
                var id = $(this).attr("data-id");

                layer.confirm('你确定要删除么?', {
                    btn: ['确定', '取消']
                }, function () {
                    $.get(url, function (data) {
                        if (data.code === 1) {
                            $(id).fadeOut();
                            layer.msg(data.msg, {icon: 1});
                        } else {
                            layer.msg(data.msg, {icon: 2});
                        }
                    });
                }, function () {
                    layer.msg("您取消了删除!");
                });
                return false;
            });
        })

        layui.use('form', function () {
            var form = layui.form,
                layer = layui.layer;
        });

        var vue = new Vue({
            el: '#app',
            data: {
                webname: config.name,
                menu: [],
                address: []
            },
            created: function () {
                this.menu = config.menu;
                this.thisActive();
                this.thisAttr();
            },
            methods: {
                //记住收展
                onActive: function (pid, id = false) {
                    let data;
                    if (id === false) {
                        data = this.menu[pid];
                        if (data.url.length > 0) {
                            this.menu.forEach((v, k) => {
                                v.active = false;
                                v.list.forEach((v2, k2) => {
                                    v2.active = false;
                                })
                            })
                            data.active = true;
                        }
                        data.hidden = !data.hidden;
                    } else {
                        this.menu.forEach((v, k) => {
                            v.active = false;
                            v.list.forEach((v2, k2) => {
                                v2.active = false;
                            })
                        })
                        data = this.menu[pid].list[id];
                    }

                    this.updateStorage();
                    if (data.url.length > 0) {
                        if (data.target) {
                            if (data.target === '_blank') {
                                window.open(data.url);
                            } else {
                                window.location.href = data.url;
                            }
                        } else {
                            window.location.href = data.url;
                        }
                    }
                },

                //更新菜单缓存
                updateStorage() {
                    //sessionStorage.menu = JSON.stringify(this.menu);
                    $.ajax({
                        type: "get",
                        async: false,
                        url: "/menu_storage",// 请求发送到LoginServlet处
                        data: {
                            "data": JSON.stringify(this.menu)
                        },
                        dataType: 'json',
                        success: function (msg) {

                        },
                        error: function (msg) {
                            // 请求失败时执行该函数
                            var index = layer.load();
                            layer.close(index);
                            layer.alert('请求菜单数据失败！！！', function (index) {
                                //do something
                                layer.close(index);
                            });
                        }
                    });
                },
                //菜单高亮
                thisActive: function () {
                    let pathname = window.location.pathname;
                    let host = window.location.host;
                    let pid = false;
                    let id = false;
                    this.menu.forEach((v, k) => {
                        let url = v.url;
                        if (url.length > 0) {
                            if (url[0] !== '/' && url.substr(0, 4) !== 'http') {
                                url = '/' + url;
                            }
                        }
                        if (pathname === url) {
                            pid = k;
                        }
                        v.list.forEach((v2, k2) => {
                            let url = v2.url;

                            if (url.length > 0) {
                                if (url[0] !== '/' && url.substr(0, 4) !== 'http') {
                                    url = '/' + url;
                                }
                            }
                            if (pathname === url) {
                                pid = k;
                                id = k2;
                            }
                        })
                    })


                    if (id !== false) {
                        this.menu[pid].list[id].active = true;
                    } else {
                        if (pid !== false) {
                            this.menu[pid].active = true;
                        }
                    }

                    this.updateStorage();

                },
                //当前位置
                thisAttr: function () {
                    //当前位置
                    let address = [{
                        name: '首页',
                        url: '/user/index'
                    }];
                    this.menu.forEach((v, k) => {
                        v.list.forEach((v2, k2) => {
                            if (v2.active) {
                                address.push({
                                    name: v.name,
                                    url: 'javascript:;'
                                })
                                address.push({
                                    name: v2.name,
                                    url: v2.url,
                                })
                                this.address = address;
                            }
                        })
                    })
                }
            }
        })

        function delCache() {
            sessionStorage.clear();
            localStorage.clear();
        }

        function msg(code = 1, msg = '', url = '', s = 3) {
            if (typeof code == 'object') {
                msg = code.msg;
                url = code.url || '';
                s = code.s || 3;
                code = code.code;
            }
            code = code == 1 ? 1 : 2;
            layer.msg(msg, {
                icon: code,
                offset: config.layerMsg.offset || 't',
                shade: config.layerMsg.shade || [0.4, '#000']
            });
            if (url) {
                setTimeout(function () {
                    window.location.href = url;
                }, s * 1000);
            }
        }

    </script>
</div>
</html>